.ui.segments
    h3.ui.top.attached.block.header(class!="{{#if doneItemsLength === itemsLength}}inverted green{{/if}}")
        | {{ title || 'My Todo List' }} ({{ doneItemsLength }}/{{ itemsLength }})
        checkbox.right.floated.transparent(checked="{{ isEditable }}") Edit

    .ui.attached.segment
        ui-progress.top.attached.blue(value="{{doneItemsLength}}" max="{{itemsLength}}")
        .ui.divided.left.aligned.list
            +each('checklist')
                .item
                    +iff('isEditing(.id) && isEditable')
                        form.ui.form.red
                            .fields
                                .field
                                    input(value="{{ editingContent }}")
                                .field
                                    date-picker(unix="{{ newDueTimestamp }}")
                                .field
                                    .ui.buttons.right.floated
                                        ack-button.green(value="{{ . }}" on-buttonclick="saveChanges") Save
                                        .or
                                        btn.red(on-buttonclick="cancelEdit") Cancel

                    +else
                        checkbox.transparent(
                            checked="{{ .isDone }}"
                            on-statechange="statechanged"
                            value="{{ .id }}"
                            inline
                            )
                            span(class!="{{# .isDone}}todo-item-done {{/}}").
                                {{ .content }} ({{ unixToReadable(.dueTimestamp)}})

                        +if('isEditable')
                            btn.basic.right.floated(
                                on-buttonclick="startEditing"
                                value="{{ .id }}"
                                disabled="{{ isEditing(.id) || .isDone }}"
                                ) Edit
                    +endif 
                    

    .ui.attached.segment 
        .ui.form
            .field
                i.plus.icon
                input(value="{{ newItem.content }}" placeholder="content...")
            .field 
                date-picker(unix="{{ newItem.dueTimestamp }}")
            .field
                ack-button(on-buttonclick="addNewItem" value="{{ newItem }}") Add New Item
